<template>
    <div id="aCoursesList" class="bg-fa of">
      <!-- 讲师列表 开始 -->
      <section class="container">
        <header class="comm-title all-teacher-title">
          <h2 class="fl tac">
            <span class="c-333">我的订单</span>
          </h2>
        </header>
        <section v-if="list.length === 0" class="c-sort-box unBr">
          <div>
            <!-- /无数据提示 开始-->
            <section class="no-data-wrap">
              <em class="icon30 no-data-ico">&nbsp;</em>
              <span class="c-666 fsize14 ml10 vam">您当前还没有订单</span>
            </section>
            <!-- /无数据提示 结束-->
          </div>
         
        </section>
        <el-table  v-else :data="list"
            border
            fit
            highlight-current-row
            row-class-name="myClassList"
          >
            <el-table-column label="课程信息" width="300" align="center">
              <template slot-scope="scope">
                <!-- {{ scope.row.title }} -->
                <div>
                  <div>
                    <img
                      width="150px"
                      :src="scope.row.courseCover"
                      :alt="scope.row.courseTitle"
                    />
                  </div>
                  <div>
                    <a :href="`/course/${scope.row.courseId}`">
                      {{ scope.row.courseTitle }}</a
                    >
                  </div>
                </div>
              </template>
            </el-table-column>
  
            <el-table-column label="讲师名称" width="100" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.teacherName }}</span>
              </template>
            </el-table-column>
  
            <el-table-column label="价格" width="100" align="center">
              <template slot-scope="scope">
                <span>
                  {{
                    scope.row.totalFee === 0
                      ? "免费"
                      : "￥" + scope.row.totalFee.toFixed(2)
                  }}</span
                >
              </template>
            </el-table-column>
  
            <el-table-column label="创建时间" width="200" align="center">
              <template slot-scope="scope">
                <span>{{ scope.row.gmtCreate }}</span>
              </template>
            </el-table-column>
  
            <el-table-column label="订单 状态" width="100" align="center">
              <template slot-scope="scope">
                <el-tag :type="scope.row.status == 1 ? 'success' : ''">
                  <span> {{ scope.row.status == 1 ? "已支付" : "未支付" }}</span>
                </el-tag>
                <!-- {{ scope.row.status }}  -->
              </template>
            </el-table-column>
  
            <el-table-column label="操作" width="100" align="center">
              <template slot-scope="scope">
                <router-link :to="`/course/${scope.row.courseId}`">
                  <el-link type="primary" icon="el-icon-edit" size="mini"
                    >去学习</el-link
                  >
                </router-link>
              </template>
            </el-table-column>
          </el-table>
      </section>
      <!-- /讲师列表 结束 -->
    </div>
  </template>
  
  <script>
  import orderApi from "/api/order";
  export default {
    data() {
      return {
        list: [],
      };
    },
    created() {
      this.initOrderList();
    },
    methods: {
      //加载订单列表
      initOrderList() {
        orderApi.getOrders().then((res) => {
          this.list = res.data;
        });
      },
    },
  };
  </script>